<template>
  <div>
<!--    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>美多商城-注册</title>

    </head>
    <body>
    <div class="register_con">
      <div class="l_con fl">
        <a href="index.html" class="reg_logo"><img src="@static/images/logo.png"></a>
        <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
        <div class="reg_banner"></div>
      </div>

      <div class="r_con fr">
        <div class="reg_title clearfix">
          <h1>用户注册</h1>
          <a href="login.html">登录</a>
        </div>
        <div class="reg_form clearfix">
          <form method="post" class="register_form">
            <ul>
              <li>
                <label>用户名:</label>
                <input type="text" name="user_name" id="user_name" v-model="form.username" @blur="checkusername">
                <span class="error_tip">{{error.username}}</span>
              </li>
              <li>
                <label>密码:</label>
                <input type="password" name="pwd" id="pwd" v-model="form.password" @blur="checkpassword">
                <span class="error_tip">{{error.password}}</span>
              </li>
              <li>
                <label>确认密码:</label>
                <input type="password" name="cpwd" id="cpwd"  v-model="form.conpassword" @blur="checkconpassword">
                <span class="error_tip">{{errorpassword}}</span>
              </li>
              <li>
                <label>手机号:</label>
                <input type="text" name="phone" id="phone" v-model="form.mobile" @blur="checkmobile">
                <span class="error_tip">{{ error.mobile }}</span>
              </li>
              <li>
                <label>图形验证码:</label>
                <input type="text" name="pic_code" id="pic_code" class="msg_input">
                <img src="@static/images/pic_code.jpg" alt="图形验证码" class="pic_code">
                <span class="error_tip">请填写图形验证码</span>
              </li>
              <li>
                <label>短信验证码:</label>
                <input type="text" name="msg_code" id="msg_code" class="msg_input">
                <a href="javascript:;" class="get_msg_code" @click="get_dianhua">获取短信验证码</a>
                <span class="error_tip">请填写短信验证码</span>
              </li>
              <li class="agreement">
                <input type="checkbox" name="allow" id="allow" checked="checked">
                <label>同意”美多商城用户使用协议“</label>
                <span class="error_tip">请勾选用户协议</span>
              </li>
              <li class="reg_sub">
                <input type="submit" value="注 册">
              </li>
            </ul>
          </form>
        </div>

      </div>

    </div>

    <div class="footer no-mp">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
      <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
      <p>电话：010-****888    京ICP备*******8号</p>
    </div>

    </body>
    </html>
  </div>
</template>

<script>
import '@static/css/reset.css'
import '@static/css/main.css'
export default {
  name: "Reg.vue",
  data() {
    return {
      form :{},  //提交
      error :{username:'',mobile:'',possword:''},  //错误处从
      errorpassword:''
    }
  },
  methods: {
    //验证用户名
    checkusername(){
      //用户名不为空
      let name = this.form.username
      if(name == undefined ){
        this.error.username = '必须输入用户名'
        return  false
      }
      //用户名限制 正则
      let reg = /\w{5,10}/
      if( !reg.test(name)){
        this.error.username = '用户名不符合规则'
        return false
      }
      //用户名唯一  要提交后台了
      this.$axios.post('meiduo01/reg/',this.form).then(res=>{
        if(res.data.code == 10010){
          this.error.username = '必须输入用户名'
          return false
        }
        if(res.data.code == 10011){
          this.error.username = '用户名不符合规则'
          return false
        }
        if(res.data.code == 10012){
          this.error.username = '用户名重复'
          return false
        }
        this.error.username = ''
      })
    },
    //验证手机号
    checkmobile(){
      //手机号不为空
      let mobile = this.form.mobile
      if(mobile == undefined ){
        this.error.mobile = '必须输入手机号'
        return  false
      }
      //用户名限制 正则
      let mreg = /^1[3-9]\d{9}$/
      if( !mreg.test(mobile)){
        this.error.mobile = '手机号不符合格式'
        return false
      }
      //手机号  要提交后台了
      this.$axios.post('meiduo01/reg/',this.form).then(res=>{
        if(res.data.code == 10013){
          this.error.mobile = '必须输入手机号'
          return false
        }
        if(res.data.code == 10014){
          this.error.mobile = '手机号不符合规则'
          return false
        }
        if(res.data.code == 10015){
          this.error.mobile = '手机号已注册'
          return false
        }
        this.error.mobile = ''
      })
    },
    //验证密码
    checkpassword(){
      //密码不为空
      let password = this.form.password
      if(password == undefined ){
        this.error.password = '必须输入密码'
        return  false
      }
      //密码限制 正则
      let preg = /^[a-zA-Z0-9]{8,20}$/
      if( !preg.test(password)){
        this.error.password = '密码不符合格式'
        return false
      }
      //密码  要提交后台了
      this.$axios.post('meiduo01/reg/',this.form).then(res=>{
        if(res.data.code == 10016){
          this.error.password = '必须输入密码'
          return false
        }
        if(res.data.code == 10017){
          this.error.password = '密码不符合规则'
          return false
        }
        if(res.data.code == 10018){
          this.error.password = '密码已存在'
          return false
        }
        this.error.password = ''
      })
    },
    //确认密码
    checkconpassword(){
      this.$axios.post('meiduo01/reg/',this.form).then(res=>{
        if (res.data.code == 10019){
          this.errorpassword = ''
        }else if(res.data.code == 10020){
          this.errorpassword = '2次密码不一样'
        }
      })
    },
    //短信发送
    get_dianhua(){
      this.$axios.get('meiduo01/Text/').then(res=>{

      })
    },


  },
  mounted() {
    //短信
    // this.get_dianhua()
  }

}
</script>

<style scoped>

</style>
